<template>
  <div class="us">
    <v-navbar></v-navbar>
    <div class="us-wrapper">
      <div class="head-logo">
        <img src="../../styles/imgs/us/logo.jpg" width="66" height="66" alt="">
      </div>
      <div class="content">
        <p>{{content}}</p>
      </div>
      <div class="share" @click="e_share">
        <v-button :text="buttonText"></v-button>
      </div>
    </div>
    <!-- 分享 -->
    <div v-show="share" class="share-code">
      <div class="share-wrapper">
        <vue-qr :text="qrTest" qid="testid"></vue-qr>
        <div style="text-align: center;font-size: 16px; color: #ffffff;">Polo商城</div>
        <div class="close">
          <Icon type="ios-close-circle-outline" @click="_closeShore"/>
        </div>
      </div>
      <div class="layer"></div>
    </div>
  </div>
</template>

<script>
  import navbar from '@c/navbar/navbar'
  import Button from '@c/button/button'
  import { mapState, mapMutations } from 'vuex'
  import Share from '@c/appshare/appshare'
  import VueQr from 'vue-qr'

  export default {
    name: 'Us',
    data() {
      return {
        qrTest: 'https://shouji.baidu.com/software/24990499.html',//二维码内容
        content:
          'Polo商城隶属于天津优客智能科技有限公司。天津优客智能科技有限公司总部位于中国美丽的滨海城市--天津，位于国家级孵化基地，是一家高新技术产业创新的公司。有专业的互联网运营与科技研发团队，拥有强大的大数据处理开发技术。优客以技术和对互联生活模式的理解，用丰富的行业经验、先进的技术，布局涵盖人居生活、网上购物、社区管理等全方位的智慧生活领域，充分优化网络的能量，致力成为中国互联生活服务先驱者。',
        buttonText: '分享',
        share: false, //分享
      }
    },
    components: {
      'v-navbar': navbar,
      'v-button': Button,
      'v-share': Share,
      VueQr,
    },
    computed: {
      ...mapState(['wtitle', 'rback']),
    },
    methods: {
      ...mapMutations(['WTITLE', 'RBACK']),
      // 分享
      e_share() {
        this.share = true
      },
      // 关闭分享
      _closeShore() {
        this.share = false
      },
    },
    created() {
      this.WTITLE('关于我们')
      this.RBACK(true)
    },
  }
</script>
<style>
  .share-code {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .share-code .share-wrapper .close {
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #999;
  }

  .share-code .layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    z-index: -1;
  }
</style>
